<template>
  <div style="padding: 10px;">
    <div class="headerBoxList">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M6 9C6 7.34315 7.34315 6 9 6H34.2814L42 13.2065V39C42 40.6569 40.6569 42 39 42H9C7.34315 42 6 40.6569 6 39V9Z"
          fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M24.0083 6L24 13.3846C24 13.7245 23.5523 14 23 14H15C14.4477 14 14 13.7245 14 13.3846L14 6" fill="none" />
        <path d="M24.0083 6L24 13.3846C24 13.7245 23.5523 14 23 14H15C14.4477 14 14 13.7245 14 13.3846L14 6H24.0083Z"
          stroke="#333" stroke-width="4" stroke-linejoin="round" />
        <path d="M9 6H34.2814" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M14 26H34" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M14 34H24.0083" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span style="margin-left: 10px">存储信息</span>
    </div>
    <div class="content">
      <div style="border-bottom: 1px solid #ebebeb;display: flex;align-items: center;padding: 10px 0;"
        v-for="(item, index) in list" :key="index">
        <img src="../../../../assets/save.png" alt="">
        <div style="margin-left:20px;">
          <div>可用(kb)：{{ item.Available }}</div>
          <div>文件系统：{{ item.Filesystem }}</div>
          <div>挂载：{{ item.Mountedon }}</div>
          <div>用量：{{ item.Use }}</div>
          <div>使用：{{ item.Used }}</div>
          <div>blocks(kb)：{{ item.blocks }}</div>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="offset"
        :page-size="limit" layout="total,pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { getPhoneInFoApi } from '@/api/phoneInfo/index'
export default {
  name: 'saveInfo',
  props: ['sendData'],
  data() {
    return {
      list: [],
      total: 0,
      offset: 1,
      limit: 10
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    '$store.state.account.basePhone': function () {
      this.init();
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.offset = val;
      this.init();
    },
    init() {
      let api = '/' + this.sendData.href;
      let data = {
        proof_num: this.sendData.proof_num,
        offset: this.offset,
        limit: this.limit
      }
      getPhoneInFoApi(data, api).then(res => {
        this.list = res.data;
        this.total = res.data[0].cnt;
      }).catch(error => {

      })
      //   let node = this.sendData;
      //   let dataJson = {
      //     "proof_num":node.proof_num,
      //     "rxTmpPath":'/'+node.subtype
      //   }
      // getRxTmpPathApi(dataJson).then(res=>{
      //   if(!res.data)return
      //   const str = res.data;

      //   let arr = str.split("\n");
      //     this.list = arr;
      //     this.total = arr.length;
      // }).catch(error=>{

      // })
    }

  }

}
</script>
  
<style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.content {
  height: 81vh;
  overflow-y: auto;
  margin-top: 20px;
  overflow-x: hidden;
}

@media screen and (min-width: 2360px) {
  .content {
    height: 77vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 2561px) {
  .content {
    height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}</style>